<template>
	<div class="table-demo-container layout-padding">
		<div class="table-demo-padding layout-padding-view layout-padding-auto">
			<div class="table-demo">
				<div class="monitor-left">
					<div class="avatar" v-for="item in 5" :key="item">
						<img :src="avatar" alt="">
					</div>
					<div class="time">
						<my-time></my-time>
					</div>
				</div>
				<div class="monitor-right">
					<el-table :data="state.tableData" style="width: 100%">
						<el-table-column prop="code" label="工号" />
						<el-table-column prop="name" label="姓名" />
						<el-table-column prop="address" label="区域" />
						<el-table-column prop="time" label="时间" />
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, ref, onMounted, provide } from 'vue';
import avatar from '/@/assets/monitorAvter.png'
import { RefType } from '/@/types/global';
import { NextLoading } from '/@/utils/loading';

const dialogRef = ref<RefType>();
// 引入组件
const MyTime = defineAsyncComponent(() => import('/@/components/myTime/index.vue'));
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/noAddSearch.vue'));

const treeProps = {
	label: 'name',
	key: 'code',
	children: 'children'
}

// 定义变量内容
const tableRef = ref<RefType>();
const state = reactive({
	config: {
		loading: false
	},
	tableData: [
		{
			code: '906',
			time: '2024-01-18 07:04',
			name: '陈照碧',
			address: '一级区域',
		},
		{
			code: '901',
			time: '2024-01-18 12:25',
			name: '张兵',
			address: '一级区域',
		},
		{
			code: '898',
			time: '2024-01-18 13:28',
			name: '谭静',
			address: '一级区域',
		},
		{
			code: '897',
			time: '2024-01-18 14:16',
			name: '廖昌国',
			address: '一级区域',
		},
		{
			code: '892',
			time: '2024-01-18 17:28',
			name: '周兴容',
			address: '一级区域',
		},
	]
});
// 初始化列表数据
const getTableData = () => {
	NextLoading.done();
	// state.config.loading = true;
	// state.config.loading = false;
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.table-demo-container {


	.table-demo-padding {
		padding: 15px;
		background-image: url('/@/assets/monitorBgImg.png');
		background-repeat: no-repeat; //是否平铺
		background-position: center; //设置背景图像的起始位置
		background-size: cover; //规定背景图像的尺寸

		.table-demo {
			// flex: 1;
			height: calc(100vh - 15px);
			overflow: hidden;

			box-sizing: border-box;
			padding: 10px;
			display: flex;
			justify-content: space-between;

			.monitor-left {
				position: relative;
				box-sizing: border-box;
				padding: 15px;
				width: 59%;
				height: 100%;
				background-image: url('/@/assets/monitorBigWarp.png');
				background-repeat: no-repeat; //是否平铺
				background-size: 100% 100%; //规定背景图像的尺寸
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;

				.avatar {
					height: 120px;
					width: 100px;
					margin-right: 5px;
					margin-bottom: 5px;
				}
				.time {
					position: absolute;
					bottom: 30px;
					left: 10px;
					transform: scale(0.7);
				}

				.avatar img {
					height: 100%;
					width: 100%;
				}
			}

			.monitor-right {
				box-sizing: border-box;
				padding: 15px;
				width: 40%;
				height: 100%;
				background-image: url('/@/assets/monitorSmallWarp.png');
				background-repeat: no-repeat; //是否平铺
				background-size: 100% 100%; //规定背景图像的尺寸
			}
		}
	}
}

:deep(.el-table) {
	background-color: transparent !important;
}

:deep(.el-table tr) {
	background-color: transparent !important;
	color: #fff;
}



:deep(.el-table th) {
	background-color: transparent !important;
	color: #fff;
}

:deep(.el-table .el-table__row:hover) {
	background-color: rgba(0, 0, 0, 0.3) !important;
}



:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
	background-color: rgba(0, 0, 0, 0.3) !important;
}
</style>